<!--
 作者：ex_baiyc
 日期：2016-10-11
 功能：首页-产品页面-新品上市, 点击产品图片可跳转至对应的产品详细信息页面, 点击对比按钮可添加/删除 到对标列表
 参数：
 事件：
-->
<template>
  <div class="product-new">
    <div>
      <div class="sub-title">{{newSubTitle}}</div>
      <!-- <div class="no-data "></div> -->
      <div class="item-data" v-if="products.length < 1">
        当前选择条件下暂无新品!
      </div>
      <ul class="display-flex product-list">
        <li class="item-product" v-for="item in products" :id="item.model_id">
          <div class="product-img" v-link="{path: '/industry/productInfo?brand=' + item.brand + '&model=' + item.model + '&model_id=' + item.model_id+ '&category=' + defaultCategory + '&category_id=' + item.category_id + '&org_code=' + orgCode}">
            <img :src="item.img_url || './static/img/125125.png'" alt="">
          </div>
          <div class="text-center product-title">
            {{item.product}}
          </div>
          <div class="price display-flex">
            <span class="flex2">{{item.sale_price | currency '￥'}}</span>
            <button v-if="item.contrast === false"
                    :id="$index"
                    @click="add($event, item)"
                    class="btn-add flex1">对比+</button>
            <button v-if="item.contrast === true"
                    :id="$index"
                  @click="del($event, item)"
                  class="btn-del flex1">已选</button>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default{
    props: ['products', 'newSubTitle', 'orgCode', 'defaultCategory'],
    data () {
      var data = {}
      return data
    },
    methods: {
//      添加产品到对比列表
      add: function (event, item) {
        var categoryId = item.category_id || ''
        var model = item.model || ''
        var brand = item.brand || ''
        this.$http.post(window.interface.productMonitor.add, {'category_id': categoryId, 'model': model, 'brand': brand}).then((res) => {
          var data = res.json()
          if (data.success === true) {
            item.contrast = true
            this.$parent.contranstSize++
          }
        })
      },
//      从对比列表删除产品
      del: function (event, item) {
        var categoryId = item.category_id || ''
        var model = item.model || ''
        var brand = item.brand || ''
        this.$http.post(window.interface.productMonitor.delete, {'category_id': categoryId, 'model': model, 'brand': brand}).then((res) => {
          var data = res.json()
          if (data.success === true) {
            item.contrast = false
            this.$parent.contranstSize--
          }
        })
      }
    },
    ready: function () {
    }
  }
</script>

<style lang="scss" scoped>
  .product-new {
    padding: 0 .35rem;
    border-top: 3px solid #f2f2f2;
    height: 79vh;
    overflow-y: scroll;

    .product-list {
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .sub-title{
      color: #333;
      margin-top: .2rem;
      padding-left: .5rem;
      font-size: .32rem;
      background: url('../../../static/img/icon-kongtiao.png') no-repeat 0rem .05rem / .32rem .36rem;
    }

    .item-product {
      position: relative;
      margin-top: .2rem;
      width: 48.5%;
      height: 4rem;
      border: 1px solid #e1e1e1;
      color: #999;

      div {

        img {
          vertical-align: middle;
        }
      }
    }

    .product-img {
      display: block;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
    }

    .btn-add {
      padding: .02rem .2rem;
      background: #ff7e7a;
      font-size: .3rem;
      color: #fff;
      border-radius: 3px;
    }

    .btn-del {
      padding: .02rem .25rem;
      background: rgba(245,245,245, 1);
      color: rgba(168,168,168, 1);
      font-size: .3rem;
      border-radius: 3px;
    }

    .price {
      color: #333;
      padding: .15rem .2rem .2rem;
      justify-content: space-between;
    }

  }
  .product-title{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
</style>
